<template>
  <view class="layout vip">
    <ly-nav bar back-text=" "></ly-nav>
    <view class="header" v-if="svipInfo">
      <view class="title">
        <view class="cu-tag round bg-orange">限时特惠</view>
        <view class="text-white" v-text="svipInfo.title"></view>
      </view>
      <view class="ad">
        <view class="image">
          <image src="/static/images/vip/ad01.png"></image>
          <view class="content">
            <view class="left">
              <view class="left-title">超级会员</view>
              <view style="font-size: 80upx;line-height: 60upx;">+</view>
              <view class="left-text">包月会员</view>
            </view>
            <view class="right">
              <view class="right-title">超级会员资格捆绑包</view>
              <view class="right-text">现在仅售{{ svipInfo.price }}元</view>
              <view class="right-desc">
                <view v-html="svipInfo.description"></view>
                <view>原价{{ svipInfo.oriPrice }}</view>
              </view>
            </view>
          </view>
        </view>
        <button @tap="onClickBuySVip" class="buy-btn text-white">立即抢购</button>
        <view class="buy-num text-orange">
          已有
          <text class="text-white">{{ svipInfo.nums }}人</text>
          抢购
        </view>
      </view>
    </view>
    <view class="content">
      <view class="panel buyTime">
        <view class="panel-title">购买会员时长</view>
        <view class="panel-body grid col-3">
          <view v-for="(item, index) in vips" :key="index">
            <buy-option :active="current === index" @event-click="onClickVipItem(index)" :title="item.title" :price="item.price" :discount="item.disCount"></buy-option>
          </view>
        </view>
        <view class="panel-footer"><button class="buyTimeBtn" @tap="onClickBuyVip">立即开通</button></view>
      </view>

      <view class="panel">
        <view class="panel-title">会员特权</view>
        <view class="panel-body" style="padding: 30upx 0;"><privilege></privilege></view>
      </view>
    </view>
    <view class="footer">
      <view class="footer-container">
        <view class="footer-title">会员说明</view>
        <view class="footer-content">
          <view>1. 非会员购买会员时长，购买之后立即生效</view>
          <view>2. 会员用户购买会员时长后时间自动累计</view>
          <view>3. 超级会员资格终身有效</view>
          <view>4. 超级会员特权仅在会员期内生效，无超级会员资格的用户在会员期内仅能享受普通会员特权</view>
          <view>5. 超级会员捆绑包中包括超级会员资格及包月会员</view>
        </view>
      </view>
      
      
      
      
      
    </view>
  </view>
</template>
<script>
import baseMixins from "@/utils/mixins";
import buyOption from "./components/buyOption";
import privilege from "./components/privilege";
import uniApp from "@/utils/uni-app";
import uniPay from "@/utils/uni-pay";
import lyNav from "@/components/nav";
export default {
  mixins: [baseMixins],
  components: {
    lyNav,
    buyOption,
    privilege
  },
  data() {
    return {
      current: 0,
      svipInfo: {},
      vips: []
    };
  },
  mounted() {
     console.warn(getCurrentPages())
    this.init();
  },
  methods: {
    init() {
      return this.$api.vip.lists().then(_ => {
        this.vips = _.data.data.vip;
        this.svipInfo = _.data.data.svip;
        return _;
      });
    },
    onClickVipItem(index) {
      this.current = index;
    },
    onClickBuyVip() {
      this.$api.pay
        .buy({
          product: "vip",
          id: this.vips[this.current].id
        })
        .then(_ => {
          if (_.data.data.status === 1) {
            uniApp.alert(_.data.data.msg);
          } else if (_.data.data.status === 2) {
            this.go(
              "/pages/common/pay?" +
                Object.keys(_.data.data.data)
                  .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(_.data.data.data[key]))
                  .join("&")
            );
          } else {
            uniApp.alert(_.data.data.msg);
          }
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg);
        });
    },
    onClickBuySVip() {
      if (this.$store.state.user.userInfo.svip) {
        uniApp.alert("您当前已经是SVIP了,不需要重复开通!");
        return false;
      }
      this.$api.pay
        .buy({
          product: "svip"
        })
        .then(_ => {
          if (_.data.data.status === 1) {
            uniApp.alert(_.data.data.msg);
          } else if (_.data.data.status === 2) {
            this.go(
              "/pages/common/pay?" +
                Object.keys(_.data.data.data)
                  .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(_.data.data.data[key]))
                  .join("&")
            );
          } else {
            uniApp.alert(_.data.data.msg);
          }
        })
        .catch(e => {
          console.warn({ e });
          uniApp.alert(e.data.msg);
        });
    }
  },
  onPullDownRefresh() {
    this.init().then(_ => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>

<style lang="scss" scoped>
.vip {
  background-image: url("~@/static/images/vip/bg01.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  .header {
    width: 100%;
    /* #ifdef APP-PLUS */
    margin: 50upx 0 20upx 0;
    /* #endif */
    /* #ifndef APP-PLUS */
    margin: 100upx 0 20upx 0;
    /* #endif */

    .cuIcon-back {
      position: absolute;
      left: 30upx;
      top: 40upx;
      background-color: rgba($color: #000000, $alpha: 0.75);
      height: 80upx;
      width: 80upx;
      border-radius: 100%;
      text-align: center;
      color: #ffffff;
      line-height: 80upx;
      font-size: 40upx;
    }
    .title {
      .cu-tag {
        height: 36upx;
      }
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #ffffff;
      font-size: 24upx;
    }
    .ad {
      margin: 0 auto;
      margin-top: 35upx;
      width: 700upx;
      .image {
        position: relative;
        width: 100%;
        height: 260upx;
        image {
          width: 100%;
          height: 100%;
        }
        .content {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          display: flex;
          .left {
            color: #ff6e0c;
            width: 268upx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: bold;
            &-title {
              font-size: 50upx;
            }
            &-text {
              font-size: 50upx;
            }
          }
          .right {
            width: calc(100% - 268upx);
            text-align: center;
            padding: 20upx 0;
            &-title {
              color: #000000;
              font-size: 32upx;
            }
            &-text {
              line-height: 110upx;
              color: #ff2e0c;
              font-size: 50upx;
            }
            &-desc {
              view {
                color: #999999;
                font-size: 24upx;
                line-height: 40upx;
                &:last-child {
                  text-decoration: line-through;
                }
              }
            }
          }
        }
      }
      .buy-btn {
        margin: 20upx auto;
        background-color: #ff0202;
        width: 300upx;
        height: 80upx;
        line-height: 80upx;
        border-radius: 80upx;
        box-shadow: 0 6upx 0 #980707;
        &:active {
          transform: scale(1.1);
        }
      }
      .buy-num {
        text-align: center;
        font-size: 24upx;
        text {
          margin: 0 4upx;
        }
      }
    }
  }
  > .content {
    width: 100%;
    background-image: url("~@/static/images/vip/bg03.jpg");
    background-size: 100% 100%;
  }
  .footer {
    height: 377upx;
    width: 100%;
    background-image: url("~@/static/images/vip/bg02.jpg");
    background-size: 100% 100%;
    color: #dfdfdf;
    padding: 70upx 70upx 70upx 50upx;

    &-container{
      padding: 30upx;
      border: 2upx solid #EEEEEE;
      border-radius: 20upx;
      position: relative;
    }
    &-title{
      position: absolute;
      top: -22upx;
      background: #012753;
      font-size: 32upx;
      left: 0;
      right: 0;
      width: 180upx;
      margin: 0 auto;
      text-align: center;
    }
    
    &-content {
      margin-top: 5upx;
      font-size: 26upx;
    }
  }
}

.panel {
  &:last-child {
    margin-bottom: 0;
  }
  margin-bottom: 40upx;
  border-radius: 8upx;
  background: linear-gradient(rgba(#dddeee, 0.8), #ffffff);
  .panel-title {
    color: #0f86c3;
    text-align: center;
    font-size: 34upx;
    line-height: 80upx;
    border-bottom: 1upx solid #dddddd;
    font-weight: bold;
  }
  .panel-body {
    padding: 10upx;
  }
}
.buyTime {
  .grid > view {
    padding: 25upx 15upx;
    padding-bottom: 0;
  }
  .panel-footer {
    padding: 20upx;
    .buyTimeBtn {
      background-color: #e41c10;
      color: #ffffff;
      width: 300upx;
      margin: 0 auto;
      height: 60upx;
      line-height: 60upx;
      font-size: 28upx;
      padding: 0;
    }
  }
}
</style>
